<template>
    <div class="ask-inputer-layout w-full flex justify-center items-center"
        :class="(currentSession?.messages || []).length > 0 ? 'fix-bottom' : ''">
        <div class="ask-inputer-area w-[80%]  ">
            <el-input class="input-textarea w-full" type="textarea" placeholder="请输入问题" v-model="question"></el-input>
            <div class="btn-area flex justify-end items-center absolute right-0 bottom-0 mr-[10px] mb-[10px]">

                <el-button type="primary" @click="handleAsk">提问</el-button>
            </div>
        </div>

    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useChatStore, type Message } from '@/store/chatstore';
import { storeToRefs } from 'pinia';

const chatStore = useChatStore();
const { addMessage } = chatStore;
const { currentSession } = storeToRefs(chatStore)

const question = ref('');
const handleAsk = () => {
    const newMessage: Message = {
        role: 'user',
        content: question.value,

    }
    addMessage(newMessage);
    // Clear the input field after asking
    question.value = '';
};
</script>

<style scoped lang="scss">
.ask-inputer-layout {
    padding-top: 60px;
    background-color: transparent;

    &.fix-bottom {
        position: fixed;
        padding-bottom: 16px;
        bottom: 0;
        left: 300px;
        width: calc((100vw - 320px));
        z-index: 10;
        // transform: translateX(-50%);
        background-color: #fff;
        padding-top: 10px;

    }
}

.ask-inputer-area {
    background-color: #fff;
    width: 80%;
    height: 160px;
    border: 1px solid #e4e7ed;
    border-radius: 8px;
    position: relative;
    overflow: hidden;


}

.input-textarea {
    width: 100%;
    height: 128px;

    :deep(.el-textarea__inner) {

        border: 0;
        outline: none;
        resize: none;
        height: 128px;
        box-shadow: none;
    }
}
</style>